<title>导航——点击弹出内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    <style type="text/css">
.category{margin:0;padding:0;list-style-type:none;position:relative;}
.category li {float:left;}
.category a{padding:3px 6px;background-color:orange;color:white;text-decoration:none;float:left;height:24px;}
.category a:hover {background-color:white;color:blue;text-decoration:underline;}
/*.navgation div{display:none;position:absolute;top:30px;}*/
.title{
    width: 100px;
    margin: 0px;
    background-color: antiquewhite;
}
.wrap{
    background-color: gainsboro;
}
.wrap>p{
    margin: 0px;
    padding-top: 10px;
}
</style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".title").each(function () { 
                var this_div = $(".wrap");
                var _inx = $(".title").index(this);
                $(this).click(
                function () { this_div.eq(_inx).slideToggle(600); },
                function () { this_div.eq(_inx).slideToggle(600); }
                );
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="width:100px">
    <div>
        <ul class="category">
            <li><p class="title"  style="width:100px"/>链接1</p>
            <div class="wrap">
                <p>这里放下拉内容a</p>
                <p>这里放下拉内容b</p>
                <p>这里放下拉内容c</p>
            </div>
            </li>   
        </ul>
       
    </div>
    <div> 
        <ul class="category">
            <li><p class="title"  style="width:100px"/>链接2</p>
            <div  class="wrap">
                <p>这里放下拉内容2a</p>
                <p>这里放下拉内容2b</p>
                <p>这里放下拉内容2c</p>
            </div>
            </li>   
        </ul>
    </div>
    </div>
    </form>
</body>